<template>
  <div class="new-music">
<!--    头部按钮-->
    <div class="header">
      <div class="button_box">
        <div v-for="(item, index) in headerBtn"
             :key="index"
             :class="{header_active:headerCurrentIndex === index}"
             @click="headerBtnClick(item,index)">
          {{ item.name }}
        </div>
      </div>
    </div>
<!--    中间标签-->
    <div class="center" style="display: flex">
      <div class="tags_box" style="display: flex">
        <div v-for="(item, index) in centerTags"
             :key="index"
             :class="{center_active:centerCurrentIndex === index}"
             @click="centerBtnClick(item, index)">
          {{item.type}}
        </div>
      </div>
      <div v-if="headerCurrentIndex === 0"
           class="operate"
           style="display: flex"
      >
        <div class="play">
          <img src="~@/assets/img/songlistdetail/play.svg" alt="">
          <span @click="playAll">播放全部</span>
        </div>
        <div class="collect">
          <img src="~@/assets/img/songlistdetail/collect.svg" alt="">
          <span>收藏全部</span>
        </div>
      </div>
    </div>
    <!--      路由映射-->
    <keep-alive>
      <router-view v-if="$route.meta.keepAlive"/>
    </keep-alive>
    <keep-alive>
      <router-view v-if="!$route.meta.keepAlive"/>
    </keep-alive>
  </div>
</template>

<script>
  export default {
    name: "NewMusic",
    data(){
      return{
        headerBtn:[   //头部按钮
          {name:'新歌速递',link:'/home/newMusic/newSong'},
          {name:'新碟上架',link:'/home/newMusic/newAlbum'},
        ],
        headerCurrentIndex:0, //头部按钮当前索引
        centerTags:[          //中间左边标签
          {type:'全部',id:0,area:'ALL'},
          {type:'华语',id:7,area:'ZH'},
          {type:'欧美',id:96,area:'EA'},
          {type:'日本',id:8,area:'KR'},
          {type:'韩国',id:16,area:'JP'},
        ],
        centerCurrentIndex:0, //中间左边标签当前索引
      }
    },
    created() {
      // if(this.$route.path === '/home/newMusic/newAlbum'){
      //   this.headerCurrentIndex = 1
      // }
    },
    watch:{
      //监听是否改变了标签索引
      centerCurrentIndex(){
        this.$bus.$emit('IndexChange',this.centerTags[this.centerCurrentIndex])
      },
      //监听当前地址是否为新碟,若是则将头部按钮改为新碟上课
      'route.path':{
        handler(){
          if(this.$route.path === this.headerBtn[1].link){
            this.headerCurrentIndex = 1
          }
        },
      immediate:true
      },
    },
    methods:{
      //点击头部按钮改变样式
      headerBtnClick(item,index){
        this.headerCurrentIndex = index
        this.$router.replace(item.link)
      },
      //点击中间标签改变样式
      centerBtnClick(item, index){
        this.centerCurrentIndex = index
        this.$router.push(item.link)
      },
      //发送“播放全部”事件
      playAll(){
        this.$bus.$emit('emitPlayAll')
      },
    },
  }
</script>

<style scoped>
/*‘新歌速递’‘新碟上架’按钮*/
.header{
  height: 70px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.button_box{
  display: flex;
  font-size: 13px;
  border-radius: 15px;
  border: 1px solid #c4c0c0;
}
.button_box div{
  padding: 6px 24px;
  border-radius: 15px;
  cursor: pointer;
}
.button_box div:hover{
  background-color: #F4F4F4;
}
/*此处注意权重问题,已经点击过的按钮要去掉hover时的样式*/
.button_box div.header_active{
  color: #FFFFFF;
  background-color: #BBBBBB;
}
/*中间标签*/
.tags_box{
  display: flex;
  font-size: 14px;
  line-height: 24px;
}
.tags_box div{
  margin: 0 10px;
  cursor: pointer;
}
.tags_box div:hover{
  color: #938de0;
}
.center_active{
  font-weight: 700;
}
/*中间右边样式(新歌速递)*/
.operate{
  margin-left: 650px;
}
.operate>div{
  font-size: 13px;
  padding: 4px 8px;
  margin: 0 5px;
  border: 1px solid #d5d5e0;
  border-radius: 15px;
  cursor: pointer;
}
.play:hover{
  background-color: rgb(220, 68, 62);
}
.play{
  color: #FFFFFF;
  background-color: rgb(253,84,78);
}
.collect:hover{
  background-color: #f5efef;
}
.operate img{
  width: 14px;
  height: 14px;
  vertical-align: middle;
}
.operate span{
  vertical-align: middle;
}


</style>
